<template>
  <div id="cardList">
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="10"
                  :offset="8"></el-col>
          <el-col :span="4">
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3"
              v-for="(item, index) in 8"
              :key="item">
        <el-card :body-style="{ padding: '0px' }"
                 style="margin: 10px;">
          <img :src="`${publicPath}img/login.jpg`"
               class="image">
          <div style="padding: 10px;">
            <span class="footer_title">非常完美.可爱爆炸</span>
            <div class="bottom clearFix">
              <el-link class="footer_detail"
                       :underline="false">by</el-link>
              <el-link @mouseenter.native="handleFooterDetailEnter(index)"
                       @mouseleave.native="handleFooterDetailLeave"
                       :class='{animated:index===isActive,heartBeat:index===isActive,footer_detail:true}'
                       :underline="false"
                       style="margin-left: 5px;margin-right: 15px;">天真灿漫
              </el-link>
              <el-link class="footer_detail"
                       :underline="false">2019-12-20</el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'card-list',
  components: {},
  data () {
    return {
      publicPath: process.env.BASE_URL,
      isActive: -1
    }
  },
  created () { },
  mounted () { },
  computed: {},
  watch: {},
  methods: {
    handleFooterDetailEnter (index) {
      this.isActive = index
    },
    handleFooterDetailLeave () {
      this.isActive = -1
    }
  }
}
</script>

<style lang="scss">
/*footer样式*/
.el-footer .el-card__body {
  padding: 0;
}

.time {
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearFix:before,
.clearFix:after {
  display: table;
  content: "";
  clear: both;
}

.footer_title {
  font-family: "Fredoka One", cursive;
  color: purple;
  font-weight: bold;
  font-size: 14px;
}

.footer_detail .el-link--inner {
  font-size: 12px;
  color: gray;
}
.heartBeat .el-link--inner {
  color: purple;
}

/**/
</style>
